<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>{{ message }}</h2>
      <p>{{ 6 + 6 }}</p>
      <p>{{ 3 + 2 > 4 ? 'yes' : 'no' }}</p>
      <p>{{ message.toUpperCase() }}</p>
      <!--toUpperCase() 转大写字体-->
      <!-- v-text -->
      <div v-text="text"></div>
      <!-- v-html -->
      <div v-html="html"></div>
      <!-- v-show -->
      <div v-show="true">可以显示</div>
      <div v-show="false">不可以显示</div>
      <!-- <div v-show="1+1>2?false"></div> -->
      <!-- v-if -->
      <div v-if="title===1">第一个标题</div>
      <!-- v-if-else -->
      <div v-else-if="title===2">第二个标题</div>
      <div v-else-if="title===3">第三个标题</div>
      <!-- v-else：没有表达式 -->
      <div v-else>其他情况</div>

      <div v-if="false">隐藏</div>
    </div>
    <div id="box"></div>
    <script src="vue.js"></script>
    <script>
      //创建一个Vue实力来启动应用
      var vm = new Vue({
        //配置对象
        el: '#app', //元素  1.el是把vue实力挂着到元素上    2.el为元素的选择器，id，class,标签都可以使用，但是建议使用id，id 是唯一的标实
        data: {
          //定义数据的对象
          message: 'hello',
          text: '我是文本',
          html: '<a href="#">我是空链接</a>',
          title: 4
        }
      });
      /*
		Vue的优点：
				1、操作数据，不操作DOM，节省性能
				2、遵循MVVM模式
				3、实现单页面应用
		语法：
		 1.{{}} 小胡子语法，  mustache语法 
			   将vue实力上的数据绑定到DOM上
			      解析变量
			      js运算
			      js对象的方法
		 2.指令：以v-开头的特殊属性，主要用来操作DOM
			
        1、v-text:解析纯文本    v-text="值" 值需要在数据中声明，作用类似于{{}}语法

    	2、v-html:用来更新元素的innerHtml   v-html="值" 值需要在数据中声明,可以解析标签，

    	    v-text v-html区别:
    		     v-html能解析html元素，v-text不能解析html元素

        3、v-show:根据表达式的真假值，切换元素display样式；
    		     v-show="表达式"  v-show="false":会给元素添加一个display:none的属性
    	4、v-if:根据表达式的真假值，控制DOM元素的添加与删除；
    				v-if="表达式"  v-if="false"DOM元素不存在

    	    v-show v-if 区别：
    			v-show:根据表达式的真假值，切换元素displayd样式；
    		     v-if:根据表达式的真假值，控制DOM的添加与删除；

     	v-else和v-else-if：
    	5、	v-else：不能单独使用，必须跟在v-if后面使用，否则v-else是无效的；

    	6、	v-else-if：不能单独使用，必须放在v-if和v-else之间，可以连续使用；
    		js中的if(){}elseif(){} else{}


			
			
		*/
    </script>
  </body>
</html>
